
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Spiro.cdy</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #CSConsole {
            background-color: #FAFAFA;
            border-top: 1px solid #333333;
            bottom: 0px;
            height: 200px;
            overflow-y: scroll;
            position: fixed;
            width: 100%;
        }
    </style>
    <script type="text/javascript" src="../../build/js/Cindy.js"></script>
    <script type="text/javascript" src="../../build/js/CindyGL.js"></script>
    <link rel="stylesheet" href="../../css/cindy.css">
<script id="csdraw" type="text/x-cindyscript">
A.xy = round(A.xy*100)/100;
n=round(|D,F|*4);
m=round(|O,M|*4);

drawtext((-3,3.6),"n="+n,size->20);
drawtext((-3,2.6),"m="+m,size->20);
r=|B.xy|;
k=(|H,L|);
l=(|P,R|);

drawtext((2,3.6),"$r_1$="+format(k,2),size->20);
drawtext((2,2.6),"$r_2$="+format(l,2),size->20);

f(z) := l*z^m + k*z^n;

plot(gauss(l*(exp(i*t*m))+k*(exp(i*t*n))),start->0,stop->2*π,steps->1000,color->(0.6,0,0),size->2);

colorplot(z = (complex(#) - 5 + i)/2; if(|z|<=1,1,.3)*hue(im(log(f(z)-complex(A)))/(2*π)), (2.9,-3),(7.5,2));

drawtext((3,1.2),"$r1 \cdot z^{"+n+"} + r2 \cdot z^{"+m+"} " + if(complex(A)!=0, " + " + format(complex(A),2), "") + "$",size->20, color->gray(1));
drawtext((-3,-3),"$\left\{\;r_1\cdot e^{"+n+"i\phi}+r_2\cdot e^{"+m+"i\phi} \;\big|\; 0<\phi <2\pi \;\right\}$",size->20)
;


</script>
    <script type="text/javascript">
CindyJS({
  scripts: "cs*",
  defaultAppearance: {
    dimDependent: 0.7,
    fontFamily: "sans-serif",
    lineSize: 1,
    pointSize: 5.0,
    textsize: 12.0
  },
  angleUnit: "°",
  geometry: [
    {name: "A", type: "Free", pos: [0.0, -0.0, 4.0], color: [0.5, 0.5, 0.5], alpha: 0.8999999761581421, pinned: false, size: 4.0},
    {name: "D", type: "Free", pos: [3.0, -4.0, -1.0], color: [0.0, 0.0, 0.0], pinned: true, size: 2.0},
    {name: "E", type: "Free", pos: [0.9996113619782725, -4.0, -1.0001295460072426], color: [0.0, 0.0, 0.0], pinned: true, size: 2.0},
    {name: "c", type: "Segment", color: [0.0, 0.0, 1.0], args: ["D", "E"], alpha: 0.8999999761581421},
    {name: "F", type: "PointOnSegment", pos: [2.621870066211858, -4.0, -1.0000244878531157], color: [1.0, 1.0, 1.0], args: ["c"], alpha: 0.8999999761581421},
    {name: "H", type: "Free", pos: [-1.996008320872741, -4.0, -1.0], color: [0.0, 0.0, 0.0], alpha: 0.8999999761581421, pinned: true, size: 2.0},
    {name: "K", type: "Free", pos: [4.0, 2.6660910309199988, 0.6666091030919998], color: [0.0, 0.0, 0.0], alpha: 0.8999999761581421, pinned: true, size: 2.0},
    {name: "f", type: "Segment", color: [0.0, 0.0, 1.0], args: ["H", "K"], alpha: 0.8999999761581421},
    {name: "L", type: "PointOnSegment", pos: [-3.044840104269856, -4.0, -1.0000339231533435], color: [1.0, 1.0, 1.0], args: ["f"], alpha: 0.8999999761581421},
    {name: "M", type: "Free", pos: [4.0, -4.0, -1.3335636472916268], color: [0.0, 0.0, 0.0], alpha: 0.8999999761581421, pinned: true, size: 2.0},
    {name: "N", type: "Free", pos: [1.3328727054167464, -4.0, -1.3335636472916268], color: [0.0, 0.0, 0.0], alpha: 0.8999999761581421, pinned: true, size: 2.0},
    {name: "g", type: "Segment", color: [0.0, 0.0, 1.0], args: ["M", "N"], alpha: 0.8999999761581421},
    {name: "O", type: "PointOnSegment", pos: [2.292053721384466, -4.0, -1.3335636472916268], color: [1.0, 1.0, 1.0], args: ["g"]},
    {name: "P", type: "Free", pos: [-2.6678182364581344, -4.0, -1.3335636472916268], color: [0.0, 0.0, 0.0], alpha: 0.8999999761581421, pinned: true, size: 2.0},
    {name: "Q", type: "Free", pos: [4.0, 1.999481927827999, 0.6666091030919998], color: [0.0, 0.0, 0.0], alpha: 0.8999999761581421, pinned: true, size: 2.0},
    {name: "h", type: "Segment", color: [0.0, 0.0, 1.0], args: ["P", "Q"], alpha: 0.8999999761581421},
    {name: "R", type: "PointOnSegment", pos: [4.0, 3.3479525939976633, 1.1161769680527467], color: [1.0, 1.0, 1.0], args: ["h"], alpha: 0.8999999761581421}
  ],
  ports: [{
    id: "CSCanvas",
    width: 757,
    height: 526,
    transform: [{visibleRect: [-3.6195570487955573, 4.39153501091292, 7.406618749748655, -3.2699821225537327]}],
    axes: true,
    grid: 1.0,
    background: "rgb(255,255,255)"
  }],
  use:["katex", "CindyGL"],
  cinderella: {build: 1872, version: [2, 9, 1872]}
});
    </script>
</head>
<body>
    <div id="CSCanvas"></div>
</body>
</html>
